<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-AR"><!-- InstanceBegin template="/Templates/tutorial.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>¿Qué es el CSS? - Tutorial Maquetado HTML</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/screen-black-on-white.css" media="screen" title="Negro sobre blanco" />
<link rel="alternate stylesheet" type="text/css" href="../css/screen-white-on-black.css" media="screen" title="Blanco sobre negro" />
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<meta name="author" content="Martin Alterisio &lt;malterisio777@gmail.com&gt;" />
<meta name="copyright" content="&copy; Martin Alterisio 2009" />
<link rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/legalcode" />
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/tutorial.js"></script>
<!-- InstanceBeginEditable name="head" -->
<meta name="date" content="2009-10-07" />
<!-- InstanceEndEditable -->
</head>

<body>
<!-- InstanceBeginEditable name="body" -->
	<div class="navegacion">
		<div>
			<a href="../index.html">Inicio</a>
			<a href="index.html">Capítulo</a>
		</div>
	</div>
	<div id="contenido">
		<h1>Introducción al maquetado HTML</h1>
		<h2>¿Qué es el CSS?</h2>
		<p>El <abbr title="Cascading StyleSheet">CSS</abbr> es el lenguaje formal y estructurado que se utiliza para definir estilos audiovisuales para un documento html. En otras palabras, las <em>hojas de estilo</em> css nos permiten ajustar el <em>cómo mostrar</em> una página html.</p>
		<p>Una hoja de estilos css es un documento de texto plano donde se enumeran las <em>definiciones de estilo</em> que deben aplicarse sobre el documento html. Cada definición de estilo está compuesta por un <em>selector</em> seguido por un bloque de definiciones de <em>atributos de estilo</em>. El selector permite definir el punto de aplicación de la definición de estilo y las definiciones de atributos de estilo indican un atributo de estilo en particular y el valor a utilizar para ese estilo.</p>
		<p>Las definiciones de estilo tienen la siguiente forma:</p>
		<pre><code>selector {
	atributo: valor;
	atributo: valor;
	...
}</code></pre>
		<h3>Selectores</h3>
		<p>Para establecer el punto de aplicación de una definición de estilo se hace uso de los nombres de tags y de los atributos de los tags. En css se utilizan en especial dos atributos particulares: <code>id</code> y <code>class</code>. <code>id</code> es un atributo que se utiliza para identificar un tag por un nombre único en el documento. <code>class</code> se utiliza para atribuir clasificaciones a un tag. En css estos dos atributos tienen un tratamiento especial, se puede seleccionar el tag que lleve cierto id o los tags que tengan cierta clasificación.</p>
		<p>Luego, los selectores se pueden combinar mediante operadores para establecer reglas de selección más complejas, por ejemplo para seleccionar ciertos tags que se encuentren contenidos dentro de otro tag.</p>
		<h3>Aplicación de estilos</h3>
		<p>La aplicación de estilos está gobernada por dos factores:</p>
		<dl>
			<dt>herencia</dt>
				<dd>Un estilo puede heredarse de un tag que contenga al tag donde se aplica el estilo, por ejemplo, un estilo de tipografía definido en el contenedor principal de la página se aplica en todo lugar de la página donde no se haya redefinido este estilo.</dd>
			<dt>precedencia</dt>
				<dd>El orden en que se aplican los estilos se determina según las reglas de precedencia. La precedencia está determinada tanto por el orden actual en que se definen los estilos como por la <em>especificidad</em> del selector utilizado para el estilo.</dd>
		</dl>
	</div>
	<div class="navegacion">
		<a class="anterior" href="que-es-el-html.html">Anterior</a>
		<a class="siguiente" href="../fundamentos-de-html/index.html">Siguiente</a>
	</div>
<!-- InstanceEndEditable -->
	<div id="licencia">
		<p>Esta obra está bajo una licencia Reconocimiento-No comercial-Sin obras derivadas 2.5 Argentina de Creative Commons. Para ver una copia de esta licencia, visite <a href="http://creativecommons.org/licenses/by-nc-nd/2.5/ar/">http://creativecommons.org/licenses/by-nc-nd/2.5/ar/</a> o envie una carta a Creative Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.</p>
	</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1794443-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<!-- InstanceEnd --></html>
